<template>
	<div id="appuser">
		<form>
			<div class="search-container">
				<div class="search-input" style="float: left;">
					用户名称:<el-input placeholder="用户名称" v-model="PsUser.username" style="width: 200px;"></el-input>
				</div>
				<div class="search-input" style="float: left;">
					使用状态：
					<el-select placeholder="--请选择--" v-model="PsUser.userstatus">
						<el-option label="正常" value="1"></el-option>
						<el-option label="冻结" value="0"></el-option>
					</el-select>
				</div>
				<div class="search-button" style="float: left;">
					<el-button @click.prevent="chaxun()" type="primary">查询</el-button>
				</div>

			</div>
		</form>
		<template>
			<el-table :data="zNodes" border style="width: 100%">
				<el-table-column prop="usercode" label="用户账号" width="180">
				</el-table-column>
				<el-table-column prop="username" label="用户名称" width="180">
				</el-table-column>
				<el-table-column prop="rolename" label="角色">
				</el-table-column>
				<el-table-column prop="email" label="邮箱">
				</el-table-column>
				<el-table-column prop="lastlogintime" label="最后登录时间">
				</el-table-column>
				<el-table-column prop="userstatus" label="状态(正常/冻结)">
					<template #default="scope">
						<el-radio-group v-model="scope.row.userstatus" :disabled="true">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">冻结</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>
				<el-table-column width="400px">
					<template slot="header" slot-scope="scope">
						<el-button icon="el-icon-circle-plus-outline" type="primary" plain size="mini" slot="reference"
							@click="dialogFormVisibleAdd = true">添加用户</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="dongjie(scope.$index, scope.row)">
							{{scope.row.userstatus===1? '冻结' : '解冻'}}
						</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="primary"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						<el-button size="mini" type="primary" @click="log(scope.$index, scope.row)">LOG日志</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :page-size="3" style="margin-top: 20px;" background layout="prev, pager, next" :total="Usercount"
				@current-change="handleCurrentChange">
			</el-pagination>
		</template>


		<!-- 添加嵌套表单 -->
		<el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd" :append-to-body="true" style="height: 900px;">
			<el-form :model="add">

				<el-form-item label="登录账号:">
					<el-input autocomplete="off" v-model="add.usercode" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="用户名称:">
					<el-input autocomplete="off" v-model="add.username" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="密码:">
					<el-input autocomplete="off" v-model="add.userpassword" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="角色:">
					<el-select placeholder="--请选择--" v-model="add.roleid">
						<el-option label="系统管理员" value="1"></el-option>
						<el-option label="线路管理员	" value="2"></el-option>
						<el-option label="巡检员" value="3"></el-option>
						<el-option label="消缺员" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="入职时间:">
					<el-date-picker v-model="add.data1" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="离职时间:">
					<el-date-picker v-model="add.data2" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="使用状态:">
					<template #default="scope">
						<div>
							<el-radio v-model="add.userstatus" label="1">正常</el-radio>
							<el-radio v-model="add.userstatus" label="0">冻结</el-radio>
						</div>
					</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
				<el-button type="primary" @click="childadd()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加嵌套表单 -->

		<!-- 修改嵌套表单 -->
		<el-dialog title="修改用户" :visible.sync="dialogFormVisibleupdate" :append-to-body="true" style="height: 900px;">
			<el-form :model="add">

				<el-form-item label="登录账号:">
					<el-input autocomplete="off" v-model="add.usercode" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="用户名称:">
					<el-input autocomplete="off" v-model="add.username" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="密码:">
					<el-input autocomplete="off" v-model="add.userpassword" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="角色:">
					<el-select placeholder="--请选择--" v-model="add.roleid">
						<el-option label="系统管理员" value="1"></el-option>
						<el-option label="线路管理员	" value="2"></el-option>
						<el-option label="巡检员" value="3"></el-option>
						<el-option label="消缺员" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="入职时间:">
					<el-date-picker v-model="add.entrydate" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="离职时间:">
					<el-date-picker v-model="add.dimissiondate" type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="使用状态:">
					<template #default="scope">
						<el-radio-group v-model="add.userstatus">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">冻结</el-radio>
						</el-radio-group>
					</template>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
				<el-button type="primary" @click="UpdateUser()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改嵌套表单 -->

		<!-- Log日志模态框 -->
		<el-dialog title="查看LOGO日志" :visible.sync="LogdialogVisible" :append-to-body="true" style="height: 900px;">
			<div class="block">
				<span class="demonstration">操作时间：</span>
				<el-date-picker  v-model="operateDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
				<el-button @click.prevent="showLogs()" type="primary">查询</el-button>
			</div>
			<template>
				<el-table :data="Logs"  style="width: 100%">
					<el-table-column prop="id" label="序号" width="180">
					</el-table-column>
					<el-table-column prop="usercode" label="用户名" width="180">
					</el-table-column>
					<el-table-column prop="operateinfo" label="操作信息">
					</el-table-column>
					<el-table-column prop="operatedatetime" label="操作时间">
					</el-table-column>
				</el-table>
			</template>
			<el-pagination :page-size="3" style="margin-top: 20px;" background layout="prev, pager, next" :total="LogCount"
				@current-change="LogsCurrentChange">
			</el-pagination>
			<div slot="footer" class="dialog-footer">
				<el-button @click="LogdialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- Log日志模态框 -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				operateDatetime:[],
				PsUser: {
					username: null,
					userstatus: null
				},
				Logs:[{}],
				zNodes: [{}],
				Usercount:'',
				LogCount:null,
				pager: "",
				pagerLogs:"",
				//Log日志模态框默认关闭
				LogdialogVisible: false,
				dialogFormVisibleAdd: false,
				dialogFormVisibleupdate: false,
				add: {
					id: null,
					usercode: "",
					username: "",
					userpassword: "",
					roleid: '',
					entrydate: "",
					dimissiondate: "",
					userstatus: ''
				}
			}
		},
		methods: {
			// 查询方法
			chaxun() {
				this.axios.get("http://localhost:8080/ps-user/selectPage", {
					params: {
						username: this.PsUser.username,
						userstatus: this.PsUser.userstatus,
						nowPage: this.pager
					}
				}).then((res) => {
					this.Usercount=res.data.datamap.count;
					this.zNodes = res.data.datamap.paging;
				}).catch(err => {
					console.log(err)
				});
			},
			//分页查询
			handleCurrentChange(val) {
				this.pager = val;
				this.chaxun(val);
			},
			//添加方法
			childadd() {
				let that = this;
				console.log(JSON.stringify(that.add));
				this.axios.post("http://localhost:8080/ps-user/add", that.add)
					.then((res) => {
						if (res.data == true) {
							alert("添加成功")
						}
						this.chaxun();
					}).catch(err => {
						console.log(err)
					})
				this.dialogFormVisibleAdd = false;
			},
			//修改给值方法
			handleEdit(index, row) {
				console.log(index, row);
				this.add.id = row.id,
					this.add.usercode = row.usercode,
					this.add.username = row.username,
					this.add.userpassword = row.userpassword,
					this.add.roleid = row.roleid,
					this.add.entrydate = row.entrydate,
					this.add.dimissiondate = row.dimissiondate,
					this.add.userstatus = row.userstatus,
					this.dialogFormVisibleupdate = true
			},
			UpdateUser() {
				console.log(JSON.stringify(this.add))
				this.axios.post("http://localhost:8080/ps-user/update", this.add).then((res) => {
					if (res.data == true) {
						alert("修改成功");
						this.chaxun();
					}
				}).catch(err => {
					console.log(err)
				})
			},
			//冻结解冻方法
			dongjie(index, row) {
				console.log(index, row),
					this.axios.get("http://localhost:8080/ps-user/UpdateUserStatus", {
						params: {
							id: row.id,
							userstatus: row.userstatus
						}
					}).then((res) => {
						if (res.data == true) {
							this.chaxun();
						}
					}).catch(err => {
						console.log(err)
					});
			},
			//删除方法
			handleDelete(index, row) {
				this.$confirm('是否删除用户?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let id = row.id;
					this.axios.get("http://localhost:8080/ps-user/delete/" + id, {}).then((res) => {
						if (res.data == true) {
							alert("删除成功");
						}
						this.chaxun();
					}).catch(err => {
						console.log(err);
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			log(index, row) {
				this.LogdialogVisible = true;
				this.showLogs();
			},
			showLogs(){
				if (this.operateDatetime.length === 2) {
				        const startDate = this.operateDatetime[0];
				        const endDate = this.operateDatetime[1];
				        console.log('开始日期:', startDate);
				        console.log('结束日期:', endDate);
				      } else {
				        console.log('请选择开始日期和结束日期');
				      }
				this.axios.get("http://localhost:8080/ps-logs/selectPage", {
					params: {
						nowPage: this.pagerLogs,
						operatedatetime2:this.startDate,
						operatedatetime3:this.endDate,
					}
				}).then((res) => {
					this.Logs = res.data.datamap.Logs,
					this.LogCount=res.data.count,
					console.log(this.Logs)
				}).catch(err => {
					console.log(err)
				});
			},
			LogsCurrentChange(val){
				this.pagerLogs = val;		
				this.showLogs(val);
			}

		},
		mounted() {
			this.chaxun();
		}
	}
</script>

<style>
</style>